<div class="bjui-pageContent">
    <div class="bjui-doc">
        <h3 class="page-header">横向导航菜单(hnav)</h3>
        <blockquote>
            <p>本节介绍B-JUI框架的横向导航菜单，html结构如下：</p>
        </blockquote>
        <pre class="brush: html">
            &lt;div id="bjui-hnav"&gt;
                &lt;button type="button" class="bjui-hnav-toggle btn-default" data-toggle="collapse" data-target="#bjui-hnav-navbar"&gt;
                    &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
                &lt;/button&gt;
                &lt;ul id="bjui-hnav-navbar"&gt;
                    <!-- 欢迎 -->
                    &lt;li style="width:204px;"&gt;&lt;a&gt;欢迎您，超级管理员！&lt;/a&gt;&lt;/li&gt;
                    
                    <!-- zTree菜单(单个) - BEGIN -->
                    &lt;li class="active"&gt;&lt;a href="javascript:;" data-toggle="slidebar"&gt;表单元素&lt;/a&gt;
                        &lt;ul id="bjui-hnav-tree01" class="ztree ztree_main" data-toggle="ztree" data-on-click="MainMenuClick" data-expand-all="true" data-title="表单元素演示" data-faicon="navicon" data-noinit="true"&gt;
                            &lt;li data-id="1" data-pid="0"&gt;表单元素&lt;/li&gt;
                            &lt;li data-id="10" data-pid="1" data-url="form-button.html" data-tabid="form-button"&gt;按钮&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;<!-- zTree菜单(单个) - END -->
                    
                    <!-- zTree菜单(多个) - BEGIN -->
                    &lt;li&gt;&lt;a href="javascript:;" data-toggle="slidebar"&gt;表单元素&演示&lt;/a&gt;
                        &lt;div class="trees" data-noinit="true"&gt;
                            &lt;ul id="bjui-hnav-tree02" class="ztree ztree_main" data-toggle="ztree" data-on-click="MainMenuClick" data-expand-all="true" data-title="表单元素Demo" data-faicon="navicon"&gt;
                                &lt;li data-id="1" data-pid="0"&gt;表单元素&lt;/li&gt;
                                &lt;li data-id="10" data-pid="1" data-url="form-button.html" data-tabid="form-button"&gt;按钮&lt;/li&gt;
                            &lt;/ul&gt;
                            &lt;ul id="bjui-hnav-tree03" class="ztree ztree_main" data-toggle="ztree" data-on-click="MainMenuClick" data-expand-all="true" data-title="表单综合演示"&gt;
                                &lt;li data-id="1" data-pid="0"&gt;表单演示&lt;/li&gt;
                                &lt;li data-id="14" data-pid="1" data-url="form.html" data-tabid="form"&gt;表单综合演示&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;<!-- zTree菜单(多个) - End -->
                    
                    <!-- 下拉菜单 - BEGIN -->
                    &lt;li&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;<!-- 下拉菜单 -->&lt;/a&gt;
                        &lt;ul class="dropdown-menu" role="menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;<!-- 下拉菜单一 -->&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;<!-- 下拉菜单二 -->&lt;/a&gt;&lt;/li&gt;
                            ...
                        &lt;/ul&gt;
                    &lt;/li&gt;<!-- 下拉菜单 - END -->
                    ...
                &lt;/ul&gt;
            &lt;/div&gt;
        </pre>
        <blockquote class="point">
            <p><strong>说明：</strong></p>
            <ul>
                <li>横向菜单(#bjui-hnav-navbar)的li元素添加Class<code>active</code>，并且是zTree菜单，则在框架初始化完成后，对应的zTree会自动加载到左侧导航栏</li>
                <li>zTree菜单：横向菜单的a链接属性 <code>data-toggle</code>为<code>slidebar</code>时，点击本链接将对应的zTree加载到左侧导航栏</li>
                <li>下拉菜单：横向菜单的a链接属性 <code>data-toggle</code>为<code>dropdown</code>时，触发下拉菜单</li>
                <li>zTree菜单如果要触发多棵树，需要将多个zTree(ul)放入容器<code>div(class="trees")</code>中，并为该容器添加属性<code>data-noinit="true"</code>。如果仅触发一棵树，不需要放入div容器，但需要为zTree(ul)添加属性<code>data-noinit="true"</code>。</li>
                <li>zTree(ul)的属性<code>data-faicon</code>可以定义左侧导航栏模块的icon图标，属性<code>data-faicon-close</code>可定义模块折叠时的icon图标，属性<code>data-title</code>可定义模块的名称</li>
            </ul>
        </blockquote>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>